<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../forest_chart/forest-chart.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">

<link rel="import" href="../forest_question/forest-question.html">


<dom-module id="forest-detail-panel">
  <style>
    /* Rules for narrow display. */
    :host[narrow-viewport] paper-material {
      height: 100%;
    }

    :host[narrow-viewport] #destinationTitle {
      display: none;
    }

    :host[narrow-viewport] #detailContent {
      padding: 32px;
    }

    :host[narrow-viewport] #detailContent p {
      @apply(--paper-font-body1);
    }

    /* Rules for wide display. */
    :host:not([narrow-viewport]) paper-material {
      @apply(--layout-vertical);
    }

    :host:not([narrow-viewport]) #detailContent {
      padding: 16px;
    }

    :host:not([narrow-viewport]) #destinationTitle {
      margin-top: 140px;
      margin-bottom: 25px;
    }

    /* Base rules. */
    :host {
      --paper-toolbar-background: var(--primary-background-color);
      display: flex;
      align-items: stretch;
    }

    .main {
      display: flex;
      flex-grow: 1;
      flex-direction: column;
    }

    #destinationTitle {
      margin-left: 0px;
      white-space: normal;
      line-height: 24px;
      font-family: 'Roboto Slab', serif;
      white-space: normal;  /* Allows multi-line titles. */
      font-size: large;
    }

    #detailContent {
      flex-grow: 1;
      overflow-y: auto;
    }

    paper-material {
      padding: 0;
      background-color: var(--paper-grey-900);
    }

    .nav {
      flex: 0 0 45px;
      display: flex;
      justify-content: space-between;
    }

    /* Loading styles. */
    :host.loading #detailToolbar,
    :host.loading #detailContent {
      opacity: var(--dark-secondary-opacity);
    }

    :host.loading paper-spinner {
      @apply(--layout-fit);
      display: block;
      margin: auto;
    }

    :host.loading #contentPage p {
      visibility: hidden;
    }

    paper-spinner {
      display: none;
    }
  </style>
  <template>
    <paper-material elevation="1" class="main">
      <paper-spinner id="contentSpinner" class="blue flex" active></paper-spinner>
      <div id="detailContent">
        <div id="destinationTitle" class="title bottom">{{curDestinationDetails.title}}</div>
        <template is="dom-if" if="{{hasQuestion_}}">
          <forest-question
              correct-choice="{{curDestinationDetails.correctChoice}}"
              explanation="{{curDestinationDetails.explanation}}"
              learn-more-link="{{curDestinationDetails.learnMoreLink}}">
          </forest-question>
        </template>
        <forest-chart
            observe="curDestinationDetails.loss curDestination.loss.chart.*"
            type="{{curDestinationDetails.loss.chart.type}}"
            options="{{curDestinationDetails.loss.chart.options}}"
            data="{{curDestinationDetails.loss.chart.data}}">
        </forest-chart>
      </div>

      <!-- Navigation Buttons  -->
      <div class="nav">
        <paper-icon-button
            icon="chevron-left"
            class="layout left"
            title="left"
            on-tap="handleLeftTap_">
        </paper-icon-button>
        <paper-icon-button
            icon="chevron-right"
            class="layout right"
            title="right"
            on-tap="handleRightTap_">
        </paper-icon-button>
      </div>
    </paper-material>
  </template>
  <script src="forest-detail-panel.js"></script>
</dom-module>
